<template >
  <div class="myData">
    <Back title="个人资料"> </Back>
    <Bg>
      <div class="mybox">
        <div class="mydata-list">
          <div class="user-title">头像</div>
          <div class="user-data">
            <img :src="getmyData.userImg" alt="" />
          </div>
        </div>
        <div class="mydata-list">
          <div class="user-title">用户id</div>
          <div class="user-data">
            {{ getmyData.userId }}
          </div>
        </div>
        <div class="mydata-list">
          <div class="user-title">昵称</div>
          <div class="user-data">
            {{ getmyData.nickName }}
          </div>
        </div>
        <div class="mydata-list">
          <div class="user-title">简介</div>
          <div class="user-data">
            {{ getmyData.desc }}
          </div>
        </div>
      </div>
    </Bg>
  </div>
</template>

<script>
import Bg from "../components/Bg.vue";

import Back from "../components/Back.vue";
export default {
  name: "Mydata",
  components: {
    Bg,
    Back,
  },
  data() {
    return {
      MydataData: [
        {
          title: "头像",
          // value: getmyData.userImg
        },
        {
          title: "用户id",
          // value: getmyData.userId
        },
        {
          title: "昵称",
          // value: getmyData.userImg
        },
        {
          title: "简介",
          // value: getmyData.userImg
        },
      ],
      getmyData: [],
    };
  },
  created() {
    this.getMyData();
  },
  methods: {
    getMyData() {
      this.axios({
        method: "get",
        url: "/findAccountInfo",
      })
        .then((res) => {
          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }
          this.getmyData = res.data.result;
          this.getmyData.forEach((v) => {
            this.getmyData = v;
          });
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.mydata-list {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 8px 12px;
}
.user-title {
  font-size: 15px;
  color: #555;
  font-weight: bold;
}
.user-data {
  position: absolute;
  right: 10px;
  font-size: 14px;
  color: #777;
}
.user-data img {
  width: 50px;
  height: 50px;
  background-size: cover;
}
</style>
